<?php
$status = empty($_GET['status'])?0:$_GET['status'];

$status_arr = array(0=>'待处理',1=>'预检',2=>'受理',3=>'鉴定',4=>'检毕',5=>'不通过');
$status_color = array(0=>'#FF0000',1=>'#F58974',2=>'#0E5CC1',3=>'#ff00c8',4=>'#91C460',5=>'#00FF00');
?>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>委托列表</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style>
            body{
                margin:0;
                padding:0;
                font-size:14px;
                background:#FFFFFF;
            }
            a{
                text-decoration:none !important;
                color:#000000;
            }
            .header{
                font-size:16px;
                text-align:center;
                background:#FFFFFF;
                padding:10px 0;
                position:fixed;
                top:0;
                left:0;
                right:0;
                z-index:99;
            }
            .rt_pos{
                position:absolute;
                left:16px;
                top:16px;
                content: "";
                display: inline-block;
                height: 8px;
                width: 8px;
                border-width: 0 0 2px 2px;
                border-color: #000000;
                border-style: solid;
                transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
                -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
            }
            .search_div{
                text-align:center;
                background:#0E5CC1;
                height:53px;
                line-height:53px;
                position:fixed;
                top:41px;
                left:0;
                right:0;
                z-index:99;
            }
            .search_input{
                width:270px;
                height:30px;
                line-height:53px;
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
                border-top-right-radius: 25px;
                border-bottom-right-radius: 25px;
                border: none;
                outline:none;
                text-align:center;
                padding-left:15px;
                padding-right:15px;
                font-size:16px;
            }

            .data_div{
            }
            .menu_div{
                position:fixed;
                left:0;
                width:80px;
                background:#F8F8F8;
            }
            .menu_a{
                display:inline-block;
                width:100%;
                text-align:center;
                padding-top:15px;
                padding-bottom:15px;
            }
            .menu_a_active{
                background:#FFFFFF;
                color:#0E5CC1;
            }
            .list_div{
                background:#FFFFFF;
                margin-left:95px;
                margin-right:8px;
                padding-top:104px;
            }
            .case_div{
                box-shadow:0 0 10px 0 #C0E0FB;
                border-radius:5px;
                margin-bottom:15px;
                padding:10px 10px;
            }
            .case_div p{
                margin-top:0;
                margin-bottom:5px;
            }
            .case_div p:last-child{
                margin-bottom:0;
            }
            .case_title{
                font-weight:bold;
            }
            .case_status{
                width:50px;
                height:21px;
                line-height:21px;
                font-size:12px;
                color:#FFFFFF;
                float:right;
                border-radius:3px;
                text-align:center;
            }
            hr{
                border:none;
                border-bottom:1px dashed #F58974;
            }
            .botton_botton{
                width:60px;
                color:#F58974;
                display:inline-block;
            }



            input[type=text]::-webkit-input-placeholder {
                color: #a0a0a0;
                font-weight: 400;
                font-size:16px;
            }
            input[type=text]:-moz-placeholder {
                color: #a0a0a0;
                font-weight: 400;
                font-size:16px;
            }
            input[type=text]::-moz-placeholder {
                color: #a0a0a0;
                font-weight: 400;
                font-size:16px;
            }
            input[type=text]:-ms-input-placeholder {
                color: #a0a0a0 !important;
                font-weight: 400 !important;
                font-size:16px !important;
            }
            input[type=text]::-ms-input-placeholder {
                color: #a0a0a0;
                font-weight: 400;
                font-size:16px;
            }
            input[type=text]::placeholder {
                color: #a0a0a0;
                font-weight: 400;
                font-size:16px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <span class="rt_pos"></span>
            <span>委托列表</span>
        </div>
        <div class="search_div">
            <form method="post" action="?">
                <input type="text" class="search_input" name="ss_keywords" value="" placeholder="🔍&nbsp;搜索">
            </form>
        </div>
        <div class="data_div">
            <div class="menu_div">
                <a href="?status=0" class="menu_a <?=($status == '0')?'menu_a_active':''?>">12<br/>待处理</a>
                <a href="?status=1" class="menu_a <?=($status == '1')?'menu_a_active':''?>">预检</a>
                <a href="?status=2" class="menu_a <?=($status == '2')?'menu_a_active':''?>">受理</a>
                <a href="?status=3" class="menu_a <?=($status == '3')?'menu_a_active':''?>">鉴定</a>
                <a href="?status=4" class="menu_a <?=($status == '4')?'menu_a_active':''?>">检毕</a>
                <a href="?status=5" class="menu_a <?=($status == '5')?'menu_a_active':''?>">不通过</a>
            </div>
            <div class="list_div">
                <?php
                for($i=1;$i<=30;$i++){
                    $rand = rand(0,5);
                ?>
                <div class="case_div">
                    <p>
                        <span class="case_title">永州市部门——永州市</span>
                        <span class="case_status" style="background:<?=$status_color[$rand]?>;"><?=$status_arr[$rand]?></span>
                    </p>
                    <p><?=date('Y-m-d',time())?></p>
                    <p>提取固定电子数据</p>
                    <p><span>处理人：</span><span style="color:#0E5CC1;">名字</span></p>
                    <p><span>时间：</span><span style="color:#0E5CC1;"><?=date('Y-m-d H:i',time())?></span></p>
                    <hr/>
                    <p style="text-align:center;">
                        <span class="botton_botton">点击处理</span>
                    </p>
                </div>
                <?php
                }
                ?>
            </div>
        </div>
    </body>

    <script src="common/style/js/jquery.min.1.8.1.js"></script>
    <script>
        $(function(){
            var width = $(document).width();
            var height = $(document).height();
            var height_1 = $('.header').outerHeight(true);
            var height_2 = $('.search_div').outerHeight(true);

            height = height*1-(height_1*1+height_2*1);
            $('.menu_div').css({'height':height+'px'});
            $('.menu_div').css({'top':height_1*1+height_2*1});
        })
    </script>
</html>